隆Hola 馃憢! Espera mientras comienza la sesi贸n.

Antes que todo, 驴c贸mo est谩n?

Visualizaci贸n de Informaci贸n

IIC2026 2020-2

Utilidades en D3.js I

Visualizaci贸n de Informaci贸n

IIC2026 2020-2

Repaso

Repaso


1. Cargado de datos en D3.js

2. Escalas de D3.js

3. Ejes de D3.js


const svg = d3.select("body").append("svg");

function joinDeDatos(datos) {
  svg.attr("width", 50 + datos.length * 100).attr("height", 500);

  svg
    .selectAll("rect")
    .data(datos)
    .join("rect")
    .attr("width", 50)
    .attr("fill", "magenta")
    .attr("height", (d) => d)
    .attr("x", (_, i) => 50 + i * 100);
}

const datos = [10, 20, 30, 40];
joinDeDatos(datos);

          

const width = 600;
const height = 400;
const margin = {
  top: 70,
  bottom: 70,
  right: 30,
  left: 30,
};

const svg = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const contenedor = svg
  .append("g")
  .attr("transform", `translate(${margin.left} ${margin.top})`);

function joinDeDatos(datos) {
  const maximaFrecuencia = d3.max(datos, (d) => d.frecuencia);

  const escalaAltura = d3
    .scaleLinear()
    .domain([0, maximaFrecuencia])
    .range([0, height - margin.top - margin.bottom]);

  const escalaY = d3
    .scaleLinear()
    .domain([0, maximaFrecuencia])
    .range([height - margin.top - margin.bottom, 0]);

  const ejeY = d3.axisLeft(escalaY);

  svg
    .append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`)
    .call(ejeY)
    .selectAll("line")
    .attr("x1", width - margin.right - margin.left)
    .attr("stroke-dasharray", "5")
    .attr("opacity", 0.5);

  const escalaX = d3
    .scaleBand()
    .domain(datos.map((d) => d.categoria))
    .rangeRound([0, width - margin.right - margin.left])
    .padding(0.5);

  const ejeX = d3.axisBottom(escalaX);

  svg
    .append("g")
    .attr("transform", `translate(${margin.left}, ${height - margin.bottom})`)
    .call(ejeX)
    .selectAll("text")
    .attr("font-size", 20);

  contenedor
    .selectAll("rect")
    .data(datos)
    .join("rect")
    .attr("width", escalaX.bandwidth())
    .attr("fill", "magenta")
    .attr("height", (d) => escalaAltura(d.frecuencia))
    .attr("x", (d) => escalaX(d.categoria))
    .attr("y", (d) => escalaY(d.frecuencia));
}

d3.json("datos.json")
  .then((datos) => {
    console.log(datos);
    joinDeDatos(datos);
  })
  .catch((error) => console.log(error));
          

const width = 600;
const height = 400;
const margin = {
  top: 70,
  bottom: 70,
  right: 30,
  left: 30,
};

const svg = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const contenedor = svg
  .append("g")
  .attr("transform", `translate(${margin.left} ${margin.top})`);

function joinDeDatos(datos) {
  const maximaFrecuencia = d3.max(datos, (d) => d.frecuencia);

  const escalaAltura = d3
    .scaleLinear()
    .domain([0, maximaFrecuencia])
    .range([0, height - margin.top - margin.bottom]);

  const escalaY = d3
    .scaleLinear()
    .domain([0, maximaFrecuencia])
    .range([height - margin.top - margin.bottom, 0]);

  const ejeY = d3.axisLeft(escalaY);

  svg
    .append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`)
    .call(ejeY)
    .selectAll("line")
    .attr("x1", width - margin.right - margin.left)
    .attr("stroke-dasharray", "5")
    .attr("opacity", 0.5);

  const escalaX = d3
    .scaleBand()
    .domain(datos.map((d) => d.categoria))
    .rangeRound([0, width - margin.right - margin.left])
    .padding(0.5);

  const ejeX = d3.axisBottom(escalaX);

  svg
    .append("g")
    .attr("transform", `translate(${margin.left}, ${height - margin.bottom})`)
    .call(ejeX)
    .selectAll("text")
    .attr("font-size", 20);

  contenedor
    .selectAll("rect")
    .data(datos)
    .join("rect")
    .attr("width", escalaX.bandwidth())
    .attr("fill", "magenta")
    .attr("height", (d) => escalaAltura(d.frecuencia))
    .attr("x", (d) => escalaX(d.categoria))
    .attr("y", (d) => escalaY(d.frecuencia));
}

d3.json("datos.json")
  .then((datos) => {
    console.log(datos);
    joinDeDatos(datos);
  })
  .catch((error) => console.log(error));

d3-fetch


  • d3.csv(archivo): Para leer archivo CSV.

  • d3.json(archivo): Para leer archivo JSON.

  • d3.tsv(archivo): Para leer archivo TSV.

  • d3.dsv(delimitador, archivo): Para leer archivo separado por un delimitdor com煤n.

  • ...



隆Revisa la documentaci贸n!

d3-scale


  • d3.scaleLinear(): Escalas continuas lineales.

  • d3.scalePow(): Escalas continuas de potencia.

  • d3.scaleLog(): Escalas continuas logar铆tmicas.

  • d3.scaleTime(): Escalas que reciben fechas.

  • d3.scaleOrdinal(): Escalas de dominio y rango discreto.

  • d3.bandScale(): Escalas de dominio y rango discreto, pero donde el rango tiene valores num茅ricos y continuos. Pensado para generar barras en un espacio continuo.

  • d3.scalePoint(): Escalas de dominio y rango discreto, pero donde el rango tiene valores num茅ricos y continuos. Pensado para generar puntos en un espacio continuo.

  • ...



隆Revisa la documentaci贸n!

d3-axis


  • d3.axisTop(): Eje horizontal con leyenda sobre eje.

  • d3.axisBottom(): Eje horizontal con leyenda bajo eje.

  • d3.axisRight(): Eje vertical con leyenda a la izquierda de eje.

  • d3.axisLeft(): Eje vertical con leyenda a la derecha de eje.

  • ...



隆Revisa la documentaci贸n!

d3-time y d3-time-format


  • d3.timeDay.count(inicio, fin): Cuenta cuantos d铆as han pasado entre dos fechas.

  • d3.timeFormat(formato): Para transformar fechas en strings en cierto formato.

  • d3.timeParse(formato): Para obtener fechas desde strings en cierto formato.

  • ...



隆Revisa la documentaci贸n aqu铆 y ac谩!

d3-array


  • d3.extent(arreglo): Para obtener valor m铆nimo y m谩ximo de arreglo datos.

  • d3.median(arreglo): Para mediana de arreglo de datos.

  • d3.variance(arreglo): Para varianza de arreglo de datos.

  • d3.group(arreglo): Agrupa datos de un arreglo seg煤n sus valores.

  • ...



隆Revisa la documentaci贸n!

隆Visualizaci贸n del d铆a!

隆Visualizaci贸n del d铆a!


Visualizaci贸n de frecuencia de lanzamientos de basketball en la NBA.

Propuesta por estudiante Juan Dlugoszewski.

(Fuente: Shot chart dramatically shows the change in the NBA game)

隆Visualizaci贸n del d铆a!


隆Hay personas que han publicado c贸digo para generar este tipo de visualizaciones! Aqu铆 algunas en uso

(Fuente: d3.basketball-shot-chart)

驴M谩s dudas?

Pr贸ximos eventos:


Viernes 11 de septiembre (20:00) termina plazo de Hito 1.

Pr贸ximos eventos:


Viernes 11 de septiembre (20:00) termina plazo de Hito 1.


Sesi贸n de martes 15 de septiembre revisamos Utilidades en D3.js II.

Pr贸ximos eventos:


Viernes 11 de septiembre (20:00) termina plazo de Hito 1.


Sesi贸n de martes 15 de septiembre revisamos Utilidades en D3.js II.


隆Sesi贸n de jueves 17 de septiembre es libre! Me conectar茅 de todas formas por si tienen preguntas :)

Utilidades en D3.js I

Visualizaci贸n de Informaci贸n

IIC2026 2020-2


隆Deja tus preguntas en los comentarios!